<template>
    <div class="card" v-for="(com, index) in arrs" :key="index">
        <h3>{{ index + 1 }}、{{ com.__name }}</h3>
        <component :is="com"></component>
    </div>
</template>
<script setup>
import Colors from "./components/Colors/Colors.vue";
import Menu from "./components/Menu.vue";
import Buttons from "./components/Buttons.vue";
import Popover from "./components/Popover.vue";
import Drawer from "./components/Drawer.vue";
import TagDemo from "./components/TagDemo.vue";
import Messages from "./components/Messages.vue";
import Dialog from "./components/Dialog.vue";
import Popconfirm from "./components/Popconfirm.vue";
import Tooltip from "./components/Tooltip.vue";
import Form from "./components/Form.vue";
import Table from "./components/Table.vue";
import Pagination from "./components/Pagination.vue";
import Dropdown from "./components/Dropdown.vue";
import { ref } from "vue";
const arrs = ref([Colors, Menu, Buttons, Dropdown, Popover, Drawer, TagDemo, Messages, Dialog, Popconfirm, Tooltip, Form, Table, Pagination]);
</script>
<style scoped lang="less">
.m-1 {
    margin: 12px;
}
.card {
    width: 800px;
    display: block;
    overflow: hidden;
    margin: 20px;
    > div {
        margin: 20px;
    }
    &:last-child {
        padding-bottom: 100px;
    }
}
</style>
